'use client'

import { useState } from 'react'
import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { dashboardNav } from '@/config/dashboard-nav'
import { useSession } from 'next-auth/react'
import { ChevronDownIcon } from '@heroicons/react/24/outline'
import {
  HomeIcon,
  ShoppingCartIcon,
  ArchiveBoxIcon,
  UserGroupIcon,
  BanknotesIcon,
  BuildingStorefrontIcon,
  TruckIcon,
} from "@heroicons/react/24/outline"

const navigation = [
  { name: "首页", href: "/dashboard", icon: HomeIcon },
  { name: "商品管理", href: "/dashboard/products", icon: ShoppingCartIcon },
  { name: "库存管理", href: "/dashboard/inventory", icon: ArchiveBoxIcon },
  { name: "供应商管理", href: "/dashboard/suppliers", icon: TruckIcon },
  { name: "员工管理", href: "/dashboard/employees", icon: UserGroupIcon },
  { name: "财务管理", href: "/dashboard/finance", icon: BanknotesIcon },
  { name: "商场管理", href: "/dashboard/store", icon: BuildingStorefrontIcon },
]

export function Sidebar() {
  const pathname = usePathname()
  const { data: session } = useSession()
  const [openMenus, setOpenMenus] = useState<string[]>([])

  const toggleMenu = (href: string) => {
    setOpenMenus(prev => 
      prev.includes(href) 
        ? prev.filter(item => item !== href)
        : [...prev, href]
    )
  }

  const hasAccess = (roles?: string[]) => {
    if (!roles) return true
    return roles.includes(session?.user?.role as string)
  }

  // 检查路径是否激活
  const isPathActive = (href: string) => {
    if (href === '/dashboard') {
      return pathname === href
    }
    return pathname.startsWith(href)
  }

  return (
    <div className="hidden md:flex md:flex-shrink-0">
      <div className="flex flex-col w-64">
        <div className="flex flex-col h-0 flex-1 bg-gray-800">
          <div className="flex-1 flex flex-col overflow-y-auto">
            <div className="flex items-center h-16 flex-shrink-0 px-4 bg-gray-900">
              <h1 className="text-xl font-bold text-white">商场销售系统</h1>
            </div>
            <nav className="mt-5 flex-1 px-2 space-y-1">
              {dashboardNav.map((item) => {
                if (!hasAccess(item.role)) return null

                const isActive = isPathActive(item.href)
                const isOpen = openMenus.includes(item.href)

                return (
                  <div key={item.name}>
                    {item.children ? (
                      <>
                        <button
                          onClick={() => toggleMenu(item.href)}
                          className={`
                            group w-full flex items-center px-2 py-2 text-sm font-medium rounded-md
                            ${isActive
                              ? 'bg-gray-900 text-white'
                              : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                            }
                          `}
                        >
                          <item.icon
                            className={`
                              mr-3 flex-shrink-0 h-6 w-6
                              ${isActive
                                ? 'text-white'
                                : 'text-gray-400 group-hover:text-gray-300'
                              }
                            `}
                          />
                          <span className="flex-1 text-left">{item.name}</span>
                          <ChevronDownIcon
                            className={`ml-3 h-5 w-5 transform transition-transform duration-150
                              ${isOpen ? 'rotate-180' : ''}
                            `}
                          />
                        </button>
                        {isOpen && (
                          <div className="mt-1 space-y-1">
                            {item.children.map((child) => (
                              <Link
                                key={child.href}
                                href={child.href}
                                className={`
                                  group flex items-center pl-11 pr-2 py-2 text-sm font-medium rounded-md
                                  ${isPathActive(child.href)
                                    ? 'bg-gray-900 text-white'
                                    : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                                  }
                                `}
                              >
                                {child.name}
                              </Link>
                            ))}
                          </div>
                        )}
                      </>
                    ) : (
                      <Link
                        href={item.href}
                        className={`
                          group flex items-center px-2 py-2 text-sm font-medium rounded-md
                          ${isActive
                            ? 'bg-gray-900 text-white'
                            : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                          }
                        `}
                      >
                        <item.icon
                          className={`
                            mr-3 flex-shrink-0 h-6 w-6
                            ${isActive
                              ? 'text-white'
                              : 'text-gray-400 group-hover:text-gray-300'
                            }
                          `}
                        />
                        {item.name}
                      </Link>
                    )}
                  </div>
                )
              })}
            </nav>
          </div>
        </div>
      </div>
    </div>
  )
} 